<template>
	<!--
		商品详情
			1.酒店、门票、美食 直接选择  |  商品 弹出模态选择属性
	 -->
	<view class="goods-detail-page">
		<!-- 商品banner -->
		<view class="carousel-section">
			<swiper class="carousel" @change="handleChange" circular indicator-dots indicator-color="rgba(1, 1, 1, .3)"
				indicator-active-color="#fff">
				<swiper-item class="swiper-item" v-for="(item,index) in detail.imgArr" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill" @click="previewImg(item)">{{index+1}}
						</image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 			  <view class="dot-desc">
				{{current+1}}/{{detail.imgArr.length}} <! | 已售 {{saleNumber}} -->
			<!-- 	</view> -->
		</view>
		<!-- 商品banner end -->

		<view class="contion_box_hotel">
			<!-- 商品信息 -->
			<view class="goods-info-section">
				<view class="info-top">
					<view class="goods-name">
						{{detail.Name || ''}}
					</view>
				</view>

				<view class="goods-tag">
					<view class="tag-item" v-for="(item,index) in detail.tagArr" :key="index">
						<uni-tag
							style="background-color: #498FFF;color: #fff;border: #498FFF solid 2rpx;padding: 10rpx;border-radius: 10rpx;font-size: 11px;"
							:text="item" type="error" :inverted="true" size="small"></uni-tag>
					</view>
				</view>
				<view class="info-top">
					<!-- 				<view class="goods-price">
						<text class="symbol">¥</text>
						<text class="price">{{detail.ShowPrice}}</text>
						<text class="oldPrice">{{detail.MarketPrice}}</text>
					</view> -->

					<view class="action">
						<!-- <button class="action-item" @click="handleShare">
							<uni-icons type="redo" size="20"></uni-icons>
							分享
						</button> -->
						<!-- 				<button class="action-item" :class="{'collection':isCollection}" @click="handleCollection">
							<uni-icons v-if="isCollection" type="star-filled" size="20"
								color="#498FFF!important"></uni-icons>
							<uni-icons v-else color="gray" type="star" size="20"></uni-icons>
							收藏
						</button> -->
						<!-- <view v-if="isCollection==false" class="collect" @click="handleCollection()">
							<image mode="widthFix" src="../../../static/images/getHeart.png"></image>收 藏
						</view>
						<view v-else class="collect collectEd" @click="handleCollection()">
							<image mode="widthFix" src="../../../static/images/getHeart.png"></image>已收藏
						</view> -->
					</view>
				</view>


			</view>
			<!-- 商品信息 end -->

			<view class="line"></view>
			<view class="cell-list-wapper">
				<uni-list class="uni-list">
					<!-- 				<uni-list-item style="margin-bottom: 2rpx;" showArrow clickable
						:to="`/mall_subpages/evaluation/evaluation-list?Id=${detail.Id}`">
						<template v-slot:body>
							<view class="itemLine">
								<image mode="widthFix" src="../../static/images/icon101.png"></image>
								<text class="slot-text" v-if="detail.EvaluationCount > 0"> <text
										class="grade">{{detail.EvaluationGrade}}</text><text
										style="font-size: 24rpx;margin: 0 20rpx 0 6rpx">分</text>&nbsp;&nbsp;<text
										style="font-size: 26rpx;color: gray;">共{{detail.EvaluationCount}}条评论</text></text>
								<text class="slot-text" v-else>暂无评论</text>
							</view>
						</template>
					</uni-list-item> -->
					<uni-list-item style="margin-bottom: 2rpx;" showArrow clickable
						@click="callPhone(detail.BusinessModel.Mobile)">
						<template v-slot:body>
							<view class="itemLine" v-if="detail.BusinessModel.Mobile">
								<!-- <image mode="widthFix" src="../../static/qxlj/dh.png"></image> -->
								<view class="">
									酒店电话:
								</view>
								<view class="slot-text">
									<text class="grade">
										{{detail.BusinessModel.Mobile}}
									</text>
								</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item style="border-bottom: 2rpx" showArrow clickable @click="handleShowLocation">
						<template v-slot:body>
							<view class="itemLine" v-if="detail.BusinessModel.Address">
								<!-- <image mode="widthFix" src="../../static/qxlj/dt.png"></image> -->
								<view class="">
									酒店位置:
								</view>
								<view class="slot-text">
									<text class="grade">
										{{detail.BusinessModel.Address}}
									</text>
								</view>
							</view>
						</template>
					</uni-list-item>
					<!-- 20240311隐藏营业时间 -->
					<!-- 				<uni-list-item style="margin-bottom: 2rpx;">
						<template v-slot:body>
							<view class="itemLine">
								<image mode="widthFix" src="../../static/images/icon103.png"></image>
								<text class="slot-text">
									<text class="grade" v-if="detail.BusinessModel.BusinessHours">
										营业时间:{{detail.BusinessModel.BusinessHours}}
									</text>
									<text class="grade" v-else>
										营业时间:'00:00:00 - 24:00:00'
									</text>
								</text>
							</view>
						</template>
					</uni-list-item> -->
					<!-- 				<uni-list-item style="margin-bottom: 2rpx;" showArrow clickable
						@click="goShopDetail(detail.BusinessModel.Id)">
						<template v-slot:body>
							<view class="shopLine">
								<view class="shopLeft">
									<image :src="detail.BusinessModel.ShopLogo" mode="aspectFill"></image>
									<text style="margin-left: 20rpx;">{{detail.BusinessModel.ShopName}}</text>
								</view>

							</view>
						</template>
					</uni-list-item> -->
				</uni-list>
			</view>


			<!-- 推荐产品规格列表 -->
			<view class="goods-type-section" v-if="[12,13,14,15].includes(goodsType)">
				<view class="title">
					推荐产品
				</view>
				<goods-list :list="detail.goodsList" tag="门票" type="row" size="small" :showAction="true"
					:showOldPrice="true" @btnClick="handleBtnClick" @navTo="toGoodsDetail">
				</goods-list>
			</view>
			<!-- 推荐产品规格列表end -->

			<!-- 图文详情 -->
			<view class="goods-desc-section" v-if="detail.Substance">
				<view class="d-header">产品详情</view>
				<view
					style="background-color: #FFFFFF; padding: 0rpx; padding-bottom: 60rpx;border-bottom: 10px solid #f8f8f8;">
					<mp-html :content="detail.Substance" />
				</view>
			</view>

			<view class="goods-desc-section" v-if="detail.BookingNotice">
				<view class="d-header">预订须知</view>
				<view style="background-color: #FFFFFF; padding: 0rpx; padding-bottom: 60rpx;">
					<mp-html :content="detail.BookingNotice" />
				</view>
			</view>
			<!-- 图文详情 end-->

			<!-- 底部操作菜单 -->
			<view class="page-bottom" v-if="[2,11,16].includes(goodsType)">
				<uni-goods-nav class="uni-goods-nav" :fill="true" :options="options" :buttonGroup="buttonGroup"
					@click="onClick" @buttonClick="buttonClick" />
				<image style="width: 25px;height: 25px;" class="bottomImg" src="../../static/images/icon104.png"
					mode="widthFix"></image>
				<image v-if="goodsType==2" style="width: 25px;height: 25px;" class="bottomImg2"
					src="../../static/images/icon105.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 底部操作菜单 end-->

		<spec-popuo ref="refspec" :goodsDetail="detail" @buy="handleBuy" @addCar="handleAddCar"></spec-popuo>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import specPopuo from '../components/spec-popup.vue'
	import mpHtml from '../components/mp-html/mp-html'
	import GoodsList from '../components/goods-list.vue'
	import {
		floatMul
	} from '@/utils/tools.js'
	import {
		getGoodsDetail,
		addProductCollection,
		cancelProductCollection,
		checkProductCollection,
		addProductCar,
		getUserProductCarItemNum,
	} from '@/api/mall.js'
	export default {
		name: 'GoodDetail',
		components: {
			GoodsList,
			specPopuo,
			mpHtml,
		},
		data() {
			return {
				detail: {
					imgArr: [],
				},
				// 商品类型
				goodsType: 1,
				// 商品id
				goodsId: 0,
				// banner index
				current: 0,
				// 是否收藏
				isCollection: false,
				// 销售数量
				saleNumber: 0,
				// 商品图片
				goodsImgs: [{
					src: ''
				}, {
					src: ''
				}, {
					src: ''
				}],
				// 评论图标
				starIcon: {
					color: '#0055ff',
					size: '16',
					type: 'star-filled'
				},
				// 地址图标
				addrIcon: {
					size: '16',
					type: 'location'
				},
				// 时间图标
				timeIcon: {
					size: '16',
					type: 'shop'
				},
				// 底部菜单icon配置
				options: [{
						icon: 'home',
						text: '首页',
						path: '/pages/index/index'
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 0,
						path: '/mall_subpages/cart/cart'
					},
				],
				// 底部菜单按钮配置
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff',
						type: 2
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff',
						type: 1
					},
				],
				goodsList: [],
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.base.userInfo
			}),
			// bAddress() {
			// 	try{
			// 		return  this.detail.BusinessModel.Address || '未知的地址'
			// 	}catch(e){
			// 		return ''
			// 	}
			// },
			// bBusinessHours() {
			// 	try{
			// 		return  this.detail.BusinessModel.BusinessHours || '00:00:00 - 24:00:00'
			// 	}catch(e){
			// 		return ''
			// 	}
			// }
		},
		onLoad(e) {
			const _this = this
			if (e.id) {
				// 商品id
				this.goodsId = e.id
				// 商品类型
				this.goodsType = e.type * 1
				// 加载数据
				this.lodaData()
				this.getUserCollectionType()

				if (this.goodsType === 11) {
					this.options = [{
						icon: 'home',
						text: '首页',
						path: '/pages/index/index'
					}, ]
					this.buttonGroup = [{
						text: '立即购买',
						color: '#fff',
						type: 1
					}, ]
				}
			} else {

			}
			//#ifdef H5
			_this.$jwx.initJssdk(function() {
				_this.$jwx.showMenuItems()
				_this.handleShare()
			})
			//#endif

		},
		onShow() {
			this.getCartListNumber()
		},
		methods: {
			goShop() {
				uni.navigateTo({
					url: '/mall_subpages/shop/shopIndex'
				})
			},
			goShopDetail(id) {
				uni.navigateTo({
					url: '/mall_subpages/shop/shopIndex?id=' + id
				})
			},

			...mapMutations(['setGoodsInfo', 'setGoodsInfoList']),
			// 获取数据
			async lodaData() {
				try {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					const {
						Data
					} = await getGoodsDetail({
						Id: this.goodsId
					})
					const {
						Name
					} = Data || {}
					Name && uni.setNavigationBarTitle({
						title: Name
					})
					// tag
					Data.tagArr = Data.Tags ? Data.Tags.split(',') : [],
						// static
						Data.imgArr = Data.ImgList ? Data.ImgList.split('|') : [],
						Data.imgArr.unshift(Data.Img);
					//评论为0
					if (Data.EvaluationCount === 0) {
						this.starIcon = {
							size: '16',
							type: 'star'
						}
					}

					Data.goodsList = Data.ProductSpecList.map(item => {
						if (this.goodsType !== 11) {
							const p = item.ProductAttributesList[0] || {}
							return {
								...item,
								ProductSpecId: p.ProductSpecId,
								BusinessId: Data.BusinessId,
								Img: p.ProductSpecModel.Img,
								Name: `${p.AttributesModel.Name}-${p.AttributesValueModel.Value}`,
								ShowPrice: p.ProductSpecModel.Price,
								OldPrice: p.ProductSpecModel.MarketPrice
							}
						} else {
							return {
								...item
							}
						}
					})
					Data.goodsList.forEach((item, index) => {
						item.BookingNotice = Data.BookingNotice
					})
					this.detail = Data
					console.log('detail', Data)

					if (this.goodsType === 2) {
						this.$nextTick(() => {
							this.$refs.refspec.loadData()
						})
					}
					uni.hideLoading()
				} catch (e) {
					// console.log(e)
					//TODO handle the exception
				}
			},
			// 获取用户收藏状态
			async getUserCollectionType() {
				try {
					const {
						Data
					} = await checkProductCollection({
						Id: this.goodsId
					})
					this.isCollection = Data
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 处理收藏点击
			async handleCollection() {
				try {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					if (this.isCollection) {
						await cancelProductCollection({
							Id: this.goodsId,
							CollectionType: 11
						})
						this.isCollection = false
						this.$api.msg('取消成功', 1500, false, 'success')
					} else {
						await addProductCollection({
							Id: this.goodsId
						})
						this.isCollection = true
						this.$api.msg('收藏成功', 1500, false, 'success')
					}
					uni.hideLoading()
				} catch (e) {
					//TODO handle the exception
				}

			},
			// 获取购物车数量
			async getCartListNumber() {
				try {
					const {
						Data
					} = await getUserProductCarItemNum()
					console.log("data", Data)
					this.options[1].info = Data
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 商品banner改变
			handleChange(e) {
				this.current = e.detail.current
			},
			// 底部图标点击
			onClick(e) {
				console.log("e点击", e)
				if (e.content.icon === "home") {
					uni.switchTab({
						url: e.content.path
					})
				} else {
					uni.navigateTo({
						url: e.content.path
					})
				}
			},
			// 底部右侧按钮点击
			buttonClick(e) {
				if (this.goodsType === 11) {
					this.setGoodsInfo({
						...this.detail,
						Type: this.detail.Type
					})
					uni.navigateTo({
						url: '/mall_subpages/create-order/create-order-online'
					})
				} else {
					this.$refs.refspec.show(e.content.type)
				}
			},
			// 处理立即购买
			handleBuy(data) {
				const GoodsInfoList = [{
					BusinessId: this.detail.BusinessId,
					BusinessName: this.detail.BusinessModel.CompanyName || this.detail.Name,
					OrderRemak: '',
					goodsAmount: floatMul(data.number * 1, data.Price),
					ProductInfo: [{
						Num: data.number,
						...data
					}],
					glist: [{
						Num: data.number,
						...data
					}]
				}]
				this.$refs.refspec.hide()
				this.setGoodsInfoList(GoodsInfoList)
				uni.navigateTo({
					url: '/mall_subpages/create-order/create-order?id=' + this.detail.BusinessId
				})
			},
			// 处理添加购物车
			async handleAddCar(item) {
				console.log(item)
				try {
					await addProductCar({
						"BusinessId": this.detail.BusinessId,
						"ProductId": item.ProductId,
						"ProductSpecId": item.ProductSpecId,
						"Num": item.number
					})
					this.$refs.refspec.hide()
					this.getCartListNumber()
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 处理推荐规格购买
			handleBtnClick(goodsinfo) {
				console.log('111')
				const info = this.$api.deepClone(goodsinfo)
				info.spec = info.Name
				info.Name = this.detail.Name
				this.setGoodsInfo({
					...info,
					Type: this.detail.Type
				})

				uni.navigateTo({
					url: '/mall_subpages/create-order/create-order-online'
				})
			},
			// 处理商品分享
			handleShare() {
				const _this = this
				let _WXurl = Config.site.baseH5Url +
					'/#/mall_subpages/goods-detail/goods-detail?id=${this.goodsId}&type=${this.goodsType}';
				this.$jwx.updateAppMessageShareData({
					title: this.detail.Name,
					desc: this.detail.Subtitle, // 分享描述
					link: _WXurl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: this.detail.Img, // 分享图标
				}, function(e) {
					console.log('~', e)
					// uni.showModal({
					// 	content:JSON.stringify(e)
					// })
				})
			},
			// 处理导航显示
			handleShowLocation(e) {
				const _this = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.getLocation({
							type: 'gcj02',
							success: function(res) {
								console.log('经度：' + res.longitude)
								console.log('纬度：' + res.latitude)
								wx.openLocation({
									latitude: parseFloat(res.latitude),
									longitude: parseFloat(res.longitude),
									name: _this.detail.BusinessModel.ShopName,
									address: _this.bAddress,
								})
							},
							fail: function(res) {
								console.log('定位失败')
							}
						})
					}
				})

				//#ifdef H5
				this.$jwx.getlocation((res) => {
					let LatitudeAndLongitude = []
					try {
						LatitudeAndLongitude = this.detail.BusinessModel.LatitudeAndLongitude.split(',')
					} catch (e) {
						LatitudeAndLongitude = [res.longitude, res.latitude]
					}
					wx.openLocation({
						latitude: parseFloat(LatitudeAndLongitude[1]),
						longitude: parseFloat(LatitudeAndLongitude[0]),
						name: _this.detail.BusinessModel.ShopName,
						address: _this.bAddress,
					})
				})
				//#endif


			},
			previewImg(e) { //图片预览
				uni.previewImage({
					urls: [e],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			toGoodsDetail(val) {
				console.log("val", val)
				// const {Id:id,ProductAttributesList} = val;
				// let type = ProductAttributesList[0]?.AttributesModel?.BaseType
				// uni.navigateTo({
				// 	url:`/mall_subpages/mall/goods-detail/goods-detail?id=${id}&type=${type}`
				// })
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	// *{
	// 	background-color: rgb(17,17,17);
	// }
	.goods-detail-page {

		// min-height: calc(100vh + 20px);
		// padding-top: 44px;
		.carousel-section {
			// position: relative;
			height: 500rpx;
			background-color: #e9e9e9;

			/* 轮播图 */
			/deep/ .uni-swiper-dot {
				width: 20rpx;
				height: 10rpx;
				border-radius: 50rpx;
			}


		}

		.carousel-section /deep/ .uni-swiper-dots-horizontal {
			bottom: 30rpx;

			.uni-swiper-dot {}

			.uni-swiper-dot-active {
				background-color: #e07b2b !important;
			}
		}

		.carousel {
			// position: relative;
			// left: 10%;
			// bottom: -10%;
			width: 100%;
			height: 500rpx;
			box-shadow: 0 0 20rpx #b4b4b4;
			z-index: 9;

			.swiper-item {}
		}

		.dot-desc {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			background: rgba(#333, 0.3);
			padding: 4rpx 16rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: $uni-font-size-sm - 4rpx;
		}

		.image-wrapper {
			height: 100%;
			width: 100%;
			background: #ccc;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.contion_box_hotel {
			padding: 2% 6%;
			border-radius: 20px 20px 0 0;
			background: #fff;
			margin-top: -20px;
			position: relative;
		}

		.goods-info-section {
			padding: 20rpx 0 0 0;
			position: relative;
			background-color: #FFFFFF;

			.info-top {
				display: flex;
				// padding: 0 20rpx;

				.goods-name {
					font-size: 40rpx;
					font-weight: bold;
					color: #111;
				}

				.action {
					display: flex;
					justify-content: flex-end;
					padding: 0 20rpx;
					width: 200rpx;

					.action-item {
						display: flex !important;
						flex-direction: row !important;
						align-items: center;

						/deep/ .uni-icons {
							margin-right: 10rpx;
						}
					}

					.collect {
						display: flex;
						// flex-direction: column;
						align-items: center;
						color: gray;
						font-size: 24rpx;

						image {
							width: 42rpx;

						}
					}

					.collectEd {
						color: rgb(230, 124, 55);

					}
				}

				.action-item {
					margin: 0;
					font-size: $uni-font-size-base;
					line-height: 1.4;
					display: inline-block;
					padding: 0;
					background-color: transparent;
					color: gray;

					&.collection {
						color: #498FFF;
					}

					&:after {
						border: 0;

					}

					/deep/ text {
						display: block;
					}
				}
			}

			// &:after {
			// 	position: absolute;
			// 	content: '';
			// 	width: 100%;
			// 	left: 0;
			// 	bottom: 0;
			// 	height: 16rpx;
			// 	background-color:#e9e9e9;
			// }
		}


		.goods-type-section {
			padding: 0 0 0 0;
			// background-color: #e9e9e9;

			.title {
				font-size: 18px;
				color: #333;
				font-weight: bold;
				padding: 20rpx 0;
				// background-color: #f8f8f8;
			}

			/deep/ .goods-item {
				@include dashed
			}
		}

		.goods-type-section :last-child {
			// margin-bottom: 10rpx;
		}

		.goods-desc-section {
			padding: 0;
			// background-color: #E9E9E9;

			.d-header {
				color: #000;
				width: 100%;
				text-align: left;
				margin-bottom: 2%;
				margin-top: 2%;
				font-weight: bold;
			}
		}

		.goods-name {
			flex: 1;
			font-size: $uni-font-size-lg + 16rpx;
			font-weight: 600;
		}

		.goods-tag {
			display: flex;
			// padding: 0 20rpx;
			margin-top: 20rpx;

			.tag-item {
				margin-right: 10rpx;

				/deep/ .uni-tag {
					background-color: transparent;
					color: #fff;
					border-color: transparent;
				}
			}

			/deep/ .uni-tag--error {
				display: inline;
				padding: 4rpx 6rpx;
				color: #999;

				// line-height: 32rpx;
			}

			/deep/ .error-uni-tag--inverted {
				border-color: #999;
			}
		}

		.cell-list-wapper {

			// margin-top: 20rpx;
			//background-color:#e9e9e9;
			.shopLine {
				width: 100%;
				height: 116rpx;
				//background-color: #F8F8F8;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 3%;

				.shopLeft {
					color: #333;
					font-weight: bold;
					display: flex;
					align-items: center;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 10rpx;
					}
				}

				.rightBtn {
					color: #737373;
					font-size: 24rpx;
					padding: 10rpx;
					border-radius: 10rpx;
					background-color: rgb(233, 233, 233);
					margin-right: 5%;
				}
			}

			.shopBottomLine {
				width: 100%;
				height: 4rpx;
			}

			.uni-list {

				//background-color: #e9e9e9;
				// margin-bottom: 20rpx;
				.uni-list-item {
					//background-color: #e9e9e9;
					border: none;
					// margin-bottom: 6rpx;
				}

				// .uni-list--border-top{
				// 	background-color: #e9e9e9!important;
				// }
			}

			.itemLine {
				border: none;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				image {
					width: 38rpx;

					margin-right: 20rpx;
					margin-left: 20rpx;
				}
			}

			.grade {
				color: #111;
				// padding-right: 20rpx;
			}

			.slot-text {
				color: #111;
			}

		}

		.line {
			width: 100%;
			height: 20rpx;
			// background-color: #e9e9e9;
		}

		.goods-price {
			margin-top: 20rpx;
			color: #498FFF;
			padding: 0 300rpx 20rpx 20rpx;

			.symbol {
				font-size: $uni-font-size-sm + 10rpx;
			}

			.price {
				font-size: 46rpx;
				font-weight: 600;
			}

			.oldPrice {
				font-size: $uni-font-size-sm;
				padding-left: 10rpx;
				color: #999;
				text-decoration: line-through;
			}

		}

	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		z-index: 95;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);

		.uni-goods-nav {
			width: 100%;

			// z-index:902;
			/deep/ .uni-tab__dot-box {
				z-index: 5000 !important;
			}
		}

		.bottomImg {

			position: absolute;
			left: 30rpx;
			top: 10rpx;
			z-index: 901;
		}

		.bottomImg2 {

			position: absolute;
			left: 125rpx;
			top: 10rpx;
			z-index: 901;
		}
	}
</style>
